iT邦幫忙

2024 iThome 鐵人賽

DAY 23
0
自我挑戰組

UI/UX設計的初心者冒險之旅系列 第 23

DAY23#實作練習-2_操作邏輯流程 (Logic Flow)

  • 分享至 

  • xImage
  •  

在決定要製作一個簡易的小農購物網站後,回頭找了之前寫過的筆記,在DAY6那天,有截圖一個UI設計流程的階層圖,昨天已經完成有關User story的部分。

那就接著,https://ithelp.ithome.com.tw/upload/images/20240903/201685993QQl6wRWoM.png


Functional Map

  根據那張圖的示意,接下來要繪製Functional Map,來列出網站所有主要功能,可以用來評估所需時間、人力,還有評估我做不做得到
  實作練習如下:
https://ithelp.ithome.com.tw/upload/images/20240903/20168599wsQr9NbX5u.jpg


Flow Chart/User Flow

  將所需功能列好後,可以開始根據這些功能繪製Flow Chart,或稱User Flow,主要是為了模擬使用者的操作過程。
  實作練習如下:
https://ithelp.ithome.com.tw/upload/images/20240903/20168599dgXKvdkEcI.jpg


UI Flow

  除了將基本簡陋的wireframe版本作為UI Flow外,也有人利用文字與編號繪製流程圖作為UI Flow,並將前者稱為Wire Flow。
  實作練習如下:
https://ithelp.ithome.com.tw/upload/images/20240903/20168599vpuuvxlDf9.jpg


一些廢話

相信我,到wireframe的時候,可能會跟現在的規劃不一樣 :D

參考資料

【產品規劃系列(三)】軟體PM撰寫規格書的三大工具之三,UI Flow

補充資料

  1. 設計指南第五章:資訊架構(上)
  2. UX和產品設計師的IA訊息架構指南

上一篇
DAY22#實作練習-1_創建使用者故事/旅程
下一篇
DAY24#實作練習-3_繪製網站Wireframe
系列文
UI/UX設計的初心者冒險之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言